<template>
  <view>
    <!-- banner图 -->
    <view class="banner">
      <u-swiper :list="lunboList"></u-swiper>
    </view>
    <!-- 筛选 -->
    <view class="shaixuan">
      <view class="left">
        风格<uni-icons type="top"></uni-icons>
      </view>
      <view class="right">
        价格<uni-icons type="bottom"></uni-icons>
      </view>
    </view>
    <!-- 套装item -->
    <view class="wrap-item" @click="goEmboitementDetail(suitItem.suitId)" v-for="(suitItem,index) in suitList"
      :key="index">
      <!-- 上层图片区 -->
      <view class="wrap-item-top">
        <view class="wrap-item-top-left">
          <view class="title">
            全屋14件套
          </view>
          <image :src="imgPrefixAddress + suitItem.suitPicture[0]"></image>
        </view>
        <view class="wrap-item-top-right">
          <view class="wrap-item-top-right-top">
            <image :src="imgPrefixAddress + suitItem.suitPicture[1]"></image>
          </view>
          <view class="wrap-item-top-right-bottom">
            <image :src="imgPrefixAddress + suitItem.suitPicture[2]"></image>
          </view>
        </view>
      </view>
      <!-- 中间文字标题区 -->
      <view class="wrap-item-mid">
        <view class="wrap-item-mid-style">
          极简
        </view>
        <view class="wrap-item-mid-desc">
          {{suitItem.suitName}}
        </view>
      </view>
      <!-- 价格区 -->
      <view class="wrap-item-price">
        <view class="wrap-item-price-left">
          ¥{{suitItem.suitPrice}}
        </view>
        <view class="wrap-item-price-right">
          <view class="small-text">
            <uni-icons type="fire" size="15"></uni-icons> 2333
          </view>
          <view class="small-text">
            <uni-icons type="heart-filled" size="15"></uni-icons> {{suitItem.suitSales}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        suitList: [],
        imgPrefixAddress: "https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com",
        lunboList: []
      };
    },
    methods: {
      goEmboitementDetail(id) {
        uni.navigateTo({
          url: '/subpkg/emboitementDetail/emboitementDetail?suitId=' + id
        })
        console.log(id);
      },
      async getSuitList() {
        const res = await uni.$http.get('/apt/suit/emboitement')
        // https://www.scbjlr.com/api/apt/suit/emboitement
        if (res.data.code !== 200) return uni.$showMsg('获取套装列表失败，请返回重试')
        res.data.rows.forEach(item => {
          item.suitPicture = item.suitPicture.split(',')
        })
        this.suitList = res.data.rows
      },
      async getLunboList() {
        const res = await uni.$http.get('/apt/suit/scene')
        if (res.data.code !== 200) return uni.$showMsg('获取数据失败，请返回重试')
        this.lunboList = res.data.data
      }
    },
    onLoad() {
      this.getSuitList()
      this.getLunboList()
    }
  }
</script>

<style lang="scss">
  .banner {
    width: 100%;
    height: 200px;

    image {
      width: 100%;
      height: 100%;
    }
  }

  // 筛选
  .shaixuan {
    width: 600rpx;
    height: 50rpx;
    margin: 40rpx auto;
    display: flex;

    view {
      color: #66737F;
      font-size: 14px;
      width: 160px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .left {
      border-right: 1px solid #d8d8d8;
    }

    .right {}

  }

  // 套装 item
  .wrap-item {
    width: 100%;
    height: 230px;
    margin: 40rpx auto;

    .wrap-item-top {
      display: flex;
      justify-content: space-evenly;

      .wrap-item-top-left {
        position: relative;
        width: 210px;
        height: 170px;
        border-radius: 5px;

        image {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }

        .title {
          width: 80px;
          height: 20px;
          background: linear-gradient(90deg, #FFD37C 0%, #CE993D 69%);
          font-size: 11px;
          color: #FFFFFF;
          border-radius: 4px 0px 20px 0px;
          position: absolute;
          text-align: center;
        }
      }

      .wrap-item-top-right {

        width: 25%;
        height: 170px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .wrap-item-top-right-top {
          height: 80px;
          width: 105px;
          border-radius: 5px;

          image {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
        }

        .wrap-item-top-right-bottom {
          height: 80px;
          width: 105px;
          border-radius: 5px;

          image {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
        }
      }
    }

    // 中间
    .wrap-item-mid {
      margin-top: 20rpx;
      padding: 0 25px;
      display: flex;

      .wrap-item-mid-style {
        width: 50px;
        height: 20px;
        border-radius: 10px 10px 10px 0px;
        border: 1px solid #141414;
        text-align: center;
        font-size: 11px;
        line-height: 20px;
      }

      .wrap-item-mid-desc {
        margin-left: 10rpx;
        color: #66737F;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        padding-top: 1px;
      }
    }

    // 价格区
    .wrap-item-price {
      margin-top: 20rpx;
      display: flex;
      margin-left: 25px;
      width: 330px;
      justify-content: space-between;

      .wrap-item-price-left {
        font-size: 18px;
        color: #A50000;
      }

      .wrap-item-price-right {
        font-size: 11px;
        height: 25px;
        width: 100px;
        display: flex;
        justify-content: space-between;

        .small-text {
          padding-top: 3px;
        }
      }
    }
  }
</style>